<template>
	<view class="test-container" v-if="dialInfo.quality">
		<!-- <view class="header box">
			<view class="">
				11
			</view>
			<view class="">
				22
			</view>
			<view class="">
				33
			</view>
			<view class="">
				44
			</view>
		</view> -->
		<view class="bandwidth">
			<u-cell-group :border="false" class="box">
				<u-cell :title="$t('netCard.name2')+'id'" :value="dialInfo.quality.deviceid" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name3')" :value="dialInfo.quality.city" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name4')" :value="dialInfo.quality.isp" titleStyle="color:#878787"></u-cell>
				<!-- <u-cell title="城域网节点/接入网节点" :value="dialInfo.quality.city" titleStyle="color:#878787"></u-cell> -->
				<u-cell :title="$t('netCard.name5')" :value="dialInfo.quality.nat" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name6')" :value="dialInfo.quality.diallingtype" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name7')" titleStyle="color:#878787"></u-cell>
			</u-cell-group>
		</view>
		<view class="title flex-between">
			<text>{{$t('netCard.name8')}}</text>
			<view class="" style="font-size: 26rpx;color: red;font-weight: 500;">{{dialInfo.line.date}}</view>
		</view>
		<view class="bandwidth ">
			<u-cell-group :border="false" class="box">
				<u-cell :title="$t('netCard.name9')" :value="dialInfo.line.bandwidth" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name10')" :value="dialInfo.line.avgLimit" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name11')" :value="dialInfo.line.avgDrop" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name12')" :value="dialInfo.line.avgDrop" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name13')" :value="dialInfo.line.drop" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name14')" :value="dialInfo.line.tcp" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name15')" :value="dialInfo.line.maxDrop" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name16')" :value="dialInfo.line.duration" titleStyle="color:#878787"></u-cell>
				<u-cell :title="$t('netCard.name17')" value="" titleStyle="color:#878787"></u-cell>
			</u-cell-group>
		</view>
		<view class="bandwidth">
			<view class="revenue-details">
				<view class="revenue-details-list">
					<view class="header flex-align">
						<text class="income">{{$t('netCard.name18')}}</text>
						<text class="income">{{$t('netCard.name19')}}(M)</text>
						<text class="income">{{$t('netCard.name20')}}IP</text>
					</view>
					<scroll-view scroll-y="true" style="max-height: 700rpx;">
						<view class="main flex-align" v-for="(item ,index) in dialInfo.lineQuality" :key="index">
							<view class="income" style="width: 25%;">{{item.name}}</view>
							<view class="income" style=" text-align: center;">{{item.avgUpBandwidth}}</view>
							<view class="income" style=" text-align: center;">{{item.ip}}</view>
						</view>
						<u-divider :text="$t('nomore')"></u-divider>
					</scroll-view>

				</view>
			</view>
		</view>

		<view class="bottom" v-if="dialInfo.quality.state==3">
			<u-button type="warning" shape="circle" color="#1D93FF" :text="$t('netCard.name21')" @click="handleTest"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ids: null,
				dialInfo: {},
				drop: {},
				limit: {}
			};
		},
		onLoad({
			ids
		}) {
			this.ids = ids
			this.getBandwidth()
		},
		methods: {
			async getBandwidth() {
				uni.showLoading({
					title: '',
					mask: true
				})
				const res = await this.$fun.ajax.post('bind/getBandwidth', {
					ids: this.ids
				})
				uni.hideLoading()
				this.dialInfo = res.data
			},
			async handleTest() {
				const res = await this.$fun.ajax.post('bind/bandwidth', {
					ids: this.ids
				})
				if (res.code == 1) {
					this.$fun.msg(res.message)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f9ff;
	}

	.test-container {
		padding: 0rpx 20rpx 150rpx;

		.box {}

		.header {}

		.title {
			font-size: 36rpx;
			font-weight: 600;
			margin: 15rpx 30rpx;
		}

		.bandwidth {
			background-color: #fff;
			border-radius: 10rpx;
			margin: 30rpx 0;

		}

		.bottom {
			background-color: #fff;
			height: 150rpx;
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 30rpx;

		}

		.revenue-details {
			.title {
				padding: 30rpx 0;

				.lt {
					font-size: 35rpx;
					font-weight: 600;
				}

				.rt {
					font-size: 26rpx;
					color: #8a959e;
				}
			}


		}

		.revenue-details-list {
			.header {
				background-color: #eaeeff;
				padding: 30rpx 0;
				border-radius: 30rpx 30rpx 0 0;
				color: #232323;

				.date {
					text-align: center;
					flex: 1;
				}

				.income {
					width: 200rpx;
					text-align: center;
				}
			}

			.main {
				background-color: #fff;
				padding: 15rpx;
				border-bottom: 1rpx solid #d4d4d4;

				.date {
					color: #8a959e;
				}

				.income {
					width: 33%;
					text-align: center;
				}
			}
		}

	}
</style>